<template>
  <div class="main-container">
    <keep-alive>
      <router-view class="main-view" />
    </keep-alive>
    <tab-bar :tabs="tabs" />
  </div>
</template>

<script>
import { TabBar } from '@/components'
import icon1 from '@/assets/icons/tab01.png'
import icon1a from '@/assets/icons/tab01-active.png'
import icon2 from '@/assets/icons/tab02.png'
import icon2a from '@/assets/icons/tab02-active.png'
import icon3 from '@/assets/icons/tab03.png'
import icon3a from '@/assets/icons/tab03-active.png'
export default {
  name: 'main-container',
  components: { TabBar },
  data: () => ({
    tabs: [
      {
        text: '天气',
        to: { name: 'home' },
        icon: icon1,
        iconActive: icon1a
      },
      {
        text: '小助手',
        to: { name: 'helpers' },
        icon: icon2,
        iconActive: icon2a
      },
      {
        text: '发现',
        to: { name: 'find' },
        icon: icon3,
        iconActive: icon3a
      }
    ]
  })
}
</script>

<style lang="stylus">
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .main-view {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
